import { FC, useState } from "react"
import { Table, Modal } from "antd"
import { ColumnsType } from "antd/es/table"
import styles from "./index.less"
import LineChart from "./LineChart"

export interface testReportInter {
  key?: string,
  dates: string
  projectName: string,
  type: string | "1",
  recordStatus: string
  testRequisitionNo: string,
  errorItemNum: string | "0",
  hospDistrictName: string
}

export interface infoListType {
  label: string, value: string, key: string
}


const testReportCom = (props: any) => {
  // const [isModalVisible, setIsModalVisible] = useState<boolean>(true)
  // const [reportState, setReportState] = useState<number>(0)
  let { currentReport, infoList1, infoList2, columns, data, isModalVisible } = props


  const setIsModalVisible = (state: boolean) => {
    props.setIsModalVisible(state)
  }

  /**
   * 标题数据
   */
  const renderTitleInfo = (list: Array<infoListType>) => {
    return (
      <div className={styles.info}>
        {
          list.map((item: infoListType) => {
            return (
              <div className={styles.infoItem} key={item.key}>
                <span className={styles.label}>{item.label}：</span>
                <span className={styles.value}>{item.value}</span>
              </div>
            )
          })
        }
      </div>
    )
  }
  return (
    <div>
      <div className={styles.hospital}>{currentReport ? currentReport.hospDistrictName : ""}</div>
      <div className={styles.project}>{currentReport ? currentReport.projectName : ""}</div>
      <div className={styles.infoBox}>
        {renderTitleInfo(infoList1)}
        {renderTitleInfo(infoList2)}
      </div>
      <div className={styles.reportTableBox}>
        <Table className={styles.reportTableItem}
          bordered
          rowKey='id'
          scroll={{ y: 500 }}
          columns={columns}
          dataSource={data}
          pagination={false} />
      </div>
      <Modal
        visible={isModalVisible}
        width='80%'
        title='报告趋势图'
        centered={true}
        footer={[]}
        onCancel={() => { setIsModalVisible(false) }}
        onOk={() => { setIsModalVisible(false) }}>
        <LineChart />
      </Modal>
    </div>
  )
}

export default testReportCom